<template>
    <div>
        <!--搜索区域-->
        <div id="search">
            <el-form :inline="true" :model="commoditySearch" class="demo-form-inline">
                <el-form-item label="商品名称">
                    <el-input v-model="commoditySearch.goodsname" placeholder="请输入供应商名称"></el-input>
                </el-form-item>
                <el-form-item label="库存状态">
                    <el-select v-model="commoditySearch.available" placeholder="请选择商品状态">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="禁用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh" @click="clearSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--头部工具栏-->
        <div class="header-btn">
            <el-button type="primary" size="small" @click="showAddCommodityForm">添加</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="batchDelete">
                <el-button
                        slot="reference"
                        size="small"
                        type="danger"
                >批量删除
                </el-button>
            </el-popconfirm>
        </div>
        <!--数据展示区-->
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                height="500px">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品名称">
                            <span>{{ props.row.goodsname }}</span>
                        </el-form-item>
                        <el-form-item label="供应商名称">
                            <span>{{ props.row.providername }}</span>
                        </el-form-item>
                        <el-form-item label="商品产地">
                            <span>{{ props.row.produceplace }}</span>
                        </el-form-item>
                        <el-form-item label="商品单位">
                            <span>{{ props.row.size }}</span>
                        </el-form-item>
                        <el-form-item label="商品代码">
                            <span>{{ props.row.productcode }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述">
                            <span>{{ props.row.description }}</span>
                        </el-form-item>
                        <el-form-item label="商品单价">
                            <span>{{ props.row.price }}</span>
                        </el-form-item>
                        <el-form-item label="商品数量">
                            <span>{{ props.row.number }}</span>
                        </el-form-item>
                        <el-form-item label="库存预警值">
                            <span>{{ props.row.dangernum }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称"
                    prop="goodsname">
            </el-table-column>
            <el-table-column
                    label="供应商"
                    prop="providername">
            </el-table-column>
            <el-table-column
                    label="商品数量"
                    prop="number">
            </el-table-column>
            <el-table-column label="商品状态">
                <template slot-scope="scope">
                    <el-switch
                            @change="changeCommodityAvailable(scope.row)"
                            v-model="scope.row.available"
                            :inactive-value="0"
                            :active-value="1"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
                        <el-button
                                slot="reference"
                                size="mini"
                                type="danger"
                        >删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--分页导航区-->
        <div class="name-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 15,20]"
                    :page-size="commoditySearch.limit"
                    :current-page="commoditySearch.currentPage"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--添加 编辑用户信息弹窗-->
        <el-dialog :title="dialogTitle" :visible.sync=" addCommodityFormVisible" width="50%" @close="clearInfo">
            <el-form :model="commodityForm" ref="commodityInfo" :rules="commodityRules" label-width="90px"
                     size="medium">
                <el-input v-model="commodityForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="商品名称" prop="goodsname" v-show="dialogTitle=='添加商品'">
                    <el-input v-model="commodityForm.goodsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" prop="providerid">
                    <el-select v-model="commodityForm.providerid" placeholder="请选择供应商" style="width: 100%">
                        <el-option v-for="(provider,index) in providerList" :label="provider.providername" :key="index"
                                   :value="provider.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品产地" prop="produceplace">
                    <el-input v-model="commodityForm.produceplace" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品单位" prop="size">
                    <el-input v-model="commodityForm.size" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品代码" prop="productcode">
                    <el-input v-model="commodityForm.productcode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="description">
                    <el-input v-model="commodityForm.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                        label="商品单价" prop="price">
                    <el-input type="number" oninput="if(value.length>4)value=value.slice(0,4);if(value<0)value=0"
                              v-model="commodityForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="number">
                    <el-input-number v-model="commodityForm.number" :min="0" :max="10000"
                                     controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="库存预警值" prop="dangernum">
                    <el-input v-model="commodityForm.dangernum" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addCommodityInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addOrUpdateCommodity,
    batchDeleteCommodityApi,
    getCommodityInfoByIdApi,
    getCommodityPageApi,
    getProviderListApi,
    updateCommodityAvailableApi,
} from "@/request/api";

export default {
    name: "CommodityView",
    data() {
        return {
            commoditySearch: {
                limit: 5,
                currentPage: 1
            },
            addCommodityFormVisible: false,
            tableData: [],
            total: 300,
            dialogTitle: '添加商品',
            commodityForm: {},
            // 复选框数据
            multipleSelection: [],
            providerList: [],
            commodityRules: {
                goodsname: [{required: true, message: '请输入商品名', trigger: 'blur'}],
                providerid: [{required: true, message: '请输入供应商名称', trigger: 'blur'}],
                produceplace: [{required: true, message: '请选择商品产地', trigger: 'blur'}],
                size: [{required: true, message: '请输入商品单位', trigger: 'blur'}],
                productcode: [{required: true, message: '请输入商品代码', trigger: 'blur'}],
                description: [{required: true, message: '请输入商品描述', trigger: 'blur'}],
                price: [{required: true, message: '请输入商品单价', trigger: 'blur'}],
                number: [{required: true, message: '请输入商品数量', trigger: 'blur'}],
                dangernum: [{required: true, message: '请输入库存预警值', trigger: 'blur'}],
            },

        }
    },
    methods: {
        // 搜索回调
        onSearchSubmit() {
            this.commoditySearch.limit = 5
            this.commoditySearch.currentPage = 1
            this.list()
        },
        // 重置搜索数据对象
        clearSearch() {
            this.commoditySearch = {
                limit: this.commoditySearch.limit,
                currentPage: this.commoditySearch.currentPage
            }
        },
        showAddCommodityForm() {
            this.addCommodityFormVisible = true
            this.dialogTitle = '添加商品'
        },
        batchDelete() {
            // 判定用户是否选择删除的数据
            if (!this.multipleSelection.length) {
                this.$message.warning('请至少选择一项')
                return
            }
            batchDeleteCommodityApi(this.multipleSelection).then(response => {
                if (response.code == 200) {
                    this.$message({
                        type: 'success',
                        message: response.msg,
                    })
                    this.list()
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map(row => row.id)
        },
        changeCommodityAvailable(row) {
            updateCommodityAvailableApi({id: row.id, available: row.available}).then(response => {
                if (response.code == 200) {
                    this.$message({
                        type: 'success',
                        message: response.msg,
                        onClose: () => {
                            this.list()
                        }
                    })
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
        addCommodityInfo() {
            this.$refs.commodityInfo.validate(valid => {
                if (!valid) {
                    this.$message.error("请填写必要数据")
                    return
                }
                // 发送异步请求 添加用户信息
                console.log(this.commodityForm)
                addOrUpdateCommodity(this.commodityForm).then(response => {
                    if (response.code == 200) {
                        this.$message.success(response.msg)
                        this.addCommodityFormVisible = false
                        this.commodityForm = {}
                        // 重新加载数据
                        this.list()
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error => {
                    this.$message.error("请求失败")
                })
            })
        },
        // 编辑用户信息回调函数
        handleEdit(index, row) {
            this.addCommodityFormVisible = true
            this.dialogTitle = '编辑商品'
            // 获取用户的id  发送请求 获取用户详细信息
            getCommodityInfoByIdApi(row.id).then(response => {
                this.commodityForm = response.data
            })
        },
        list() {
            // 发送异步请求 获取用户信息列表
            getCommodityPageApi(this.commoditySearch).then(response => {
                if (response.code == 200) {
                    this.tableData = response.data.currentPageData
                    this.total = response.data.total
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
        // 改变每页显示条数回调函数
        handleSizeChange(val) {
            this.commoditySearch.limit = val
            this.list()
        },
        // 改变页码回调函数
        handleCurrentChange(val) {
            this.commoditySearch.currentPage = val
            this.list()
        },
        clearInfo() {
            this.commodityForm = {}
            this.$refs.commodityInfo.clearValidate()
        },
        // 渲染弹窗下拉选
        async renderSelect() {
            // 获取供应商列表   response  {code msg data}
            let providerData = await getProviderListApi()
            this.providerList = providerData.data  // [{role},{}]
        },
    },
    created() {
        this.renderSelect()
        this.list()
    }
}
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}
</style>